<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <html-child :for-child-message="childMsg1"></html-child>
        <!-- 绑定之后就从父组件传递到子组件中去了 -->
        <html-a :all-msg="allMsg"></html-a>
    </div>
    <!-- 父组件模板中，属性名要使用中划线写法 -->
    <!-- 而在子组件的props和template中，都是用驼峰写法 -->



    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var dataObj = {
            message:"hello",
            childMsg1:"hello from the",
            allMsg:"hhhh"
        };
        
        var childComponent = {//这里只是定义了一个组件，还没有注册，不能使用
            data() {
                return {
                    message:"局部组件",
                }
            },
            template:
            `
                <div>
                    <div>{{message}}</div>
                    <div>{{forChildMessage}}</div>
                </div>            
            `,
            props:["forChildMessage"],//子组件通过props声明自己需要的变量，然后在父组件调用的时候，通过v-bind绑定到父组件的数据上
        };

        var all = {//
            data() {
                return {
                    message:"局部组件",
                }
            },
            template:
            `
                <div>
                    <div>{{message}}</div>
                    <div>{{allMsg}}</div>
                </div>            
            `,
            props:["allMsg"],
        };

        Vue.component('html-a',all);//全局组件也是根实例的子组件
        
        var app = new Vue({
            el:"#app",
            components:{
                'html-child':childComponent
            },
            data:dataObj,
            methods: {
                
            },
        })
    </script>

</body>
</html>